<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

// 为每个图表创建独立的响应式引用
const chartDom1 = ref(null);
const chartDom2 = ref(null);
const chartDom3 = ref(null);
const chartDom4 = ref(null);

let chartInstances = [null, null, null, null];

// 初始化ECharts实例并设置配置项
const initChart = (dom, index) => {
  onMounted(async () => {
    await nextTick();
    if (dom.value) {
      chartInstances[index] = echarts.init(dom.value);
      const option = {
        title: {
          text: `ECharts 示例图表 ${index + 1}`
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
        },
        yAxis: {},
        series: [{
          name: '数据系列',
          type: 'bar',
          data: [120, 200, 150, 80, 70 + index * 10] // 稍微改变数据以便区分
        }],
      };
      chartInstances[index].setOption(option);
    }
  });

  onUnmounted(() => {
    if (chartInstances[index] && chartInstances[index].dispose) {
      chartInstances[index].dispose();
    }
  });
};

// 初始化所有图表
initChart(chartDom1, 0);
initChart(chartDom2, 1);
initChart(chartDom3, 2);
initChart(chartDom4, 3);
</script>

<template>
  <div ref="chartDom1" class="quarter-div"></div>
  <div ref="chartDom2" class="quarter-div"></div>
  <div ref="chartDom3" class="quarter-div"></div>
  <div ref="chartDom4" class="quarter-div"></div>
</template>

<style scoped lang="less">
.quarter-div {
  width: 50%; // 修改为25%以确保四个div并排显示
  height: 50%;
  float: left;
  box-sizing: border-box; // 添加此属性以包含padding和border在宽度内
}
</style>